<template>
	<view>
		<!-- 回退按钮 -->
		<view class="bad-box">
			<view :style="{height : nav_top + 'px'}"></view>
		</view>

		<view class="back-button u-flex u-row-center" :style="{top : nav_top + 'px'}" @click="page_back">
			<u-icon class="back-button-icon u-flex u-row-center" name="close" color="#000" size="36"></u-icon>
		</view>

		<view class="u-padding-left-30 u-padding-right-30 u-padding-top-20 u-margin-bottom-20">
			<text class="hinfo_name u-font-36">{{roomData.hinfo_name}}</text>
			<view class="u-margin-top-15">
				<u-tag class="u-margin-right-15" :text="item" type='info' shape="circle" :key='index'
					v-for="(item , index) in [roomData.area ,roomData.house_type, roomData.bed ]" />
			</view>
			<view class="u-margin-top-15 u-flex">
				<text class="price">¥ {{roomData.price}}</text>
				<text class="pre_price u-margin-left-20">(保证金 ¥{{roomData.pre_price}})</text>
			</view>
			<view class="u-flex u-margin-top-15">
				<text v-if="roomData.vip_type == 1" class="vip_price">会员价：{{roomData.vip_price == '0.00' ? '免费' : roomData.vip_price}}</text>
			</view>
		</view>

		<u-swiper :height='350' :effect3d-previous-margin='30' :border-radius='10' bg-color='#ffffff'
			:list="[roomData.img]" :autoplay='false' name='img' :effect3d="true" :circular="false" mode='none'>
		</u-swiper>


		<view class="u-font-36 u-padding-left-30 u-padding-right-30 u-padding-top-15 u-padding-bottom-20">
			房间设施
		</view>

		<view class="roomData u-padding-30 u-flex u-flex-wrap u-row-left">
			<!-- v-if="roomData." -->
			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.hot_water == 1">
				<image class="roomData-img" src="/static/icon/hot_water.png" mode="aspectFit"></image>
				<text class="roomData-text">热水</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.kongtiao == 1">
				<image class="roomData-img" src="/static/icon/kongtiao.png" mode="aspectFit"></image>
				<text class="roomData-text">空调</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.yigui == 1">
				<image class="roomData-img" src="/static/icon/yigui.png" mode="aspectFit"></image>
				<text class="roomData-text">衣柜</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.tuoxie == 1">
				<image class="roomData-img" src="/static/icon/tuoxie.png" mode="aspectFit"></image>
				<text class="roomData-text">拖鞋</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.shuzhuo == 1">
				<image class="roomData-img" src="/static/icon/shuzhuo.png" mode="aspectFit"></image>
				<text class="roomData-text">书桌</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.xishu == 1">
				<image class="roomData-img" src="/static/icon/xishu.png" mode="aspectFit"></image>
				<text class="roomData-text">洗漱用品</text>
			</view>

			<view class="roomData-item u-flex-col u-col-center" v-if="roomData.detail.yusan == 1">
				<image class="roomData-img" src="/static/icon/yusan.png" mode="aspectFit"></image>
				<text class="roomData-text">雨伞</text>
			</view>

		</view>

		<!-- 订购按钮 -->
		<view class="u-padding-left-30 u-padding-right-30 u-padding-top-20">
			<LoginButton ref="LoginButton">
				<u-button @click="open_calendar" type="warning" :ripple="true" ripple-bg-color='rgba(22, 22, 22, 0.15)'>
					代订/预定
				</u-button>
			</LoginButton>
		</view>

		<u-calendar v-model="calendar_show" max-date='2050-01-01' :sub_time='roomData.sub_time'
			:min-date="$u.timeFormat(Date.parse(new Date()), 'yyyy-mm-dd')" :safe-area-inset-bottom='true' mode="range"
			@change="checkOrder" active-bg-color='#ff9900' year-arrow-color='#999' month-arrow-color='#999'
			btn-type='warning'>
		</u-calendar>

		<u-toast ref="uToast" :icon='false' />

		<u-popup v-model="order_popup_flag" mode="bottom">
			<view class="order_popup_box">
				<view class="bad-box">
					<view :style="{height : nav_top + 'px'}"></view>
				</view>
				<view class="back-button u-flex u-row-center " :style="{top : nav_top + 'px'}"
					@click="order_popup_flag = false">
					<u-icon class="back-button-icon u-flex u-row-center" name="close" color="#000" size="36"></u-icon>
				</view>

				<view class="bf border-radius-p u-margin-left-30 u-margin-right-30">

					<view class="u-padding-left-20 u-padding-right-20 u-margin-top-30">
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">入离日期：</text>
							<text class="p_text u-margin-left-15">{{temp_time.startDate}} 至 {{temp_time.endDate}}</text>
							<text v-if="order_info.days" class="p_text u-margin-left-15">共{{order_info.days}}天</text>
						</view>
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">房间价格：</text>
							<text class="p_text u-margin-left-15">{{order_info.price}} 元</text>
						</view>
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">保证金：</text>
							<text class="p_text u-margin-left-15">{{order_info.pre_price}} 元</text>
						</view>

						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">账户余额：</text>
							<text class="p_text u-margin-left-15">{{order_info.remain_money}} 元</text>
						</view>
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">总费用：</text>
							<text class="p_text u-margin-left-15">{{order_info.total_price}} 元</text>
						</view>

					</view>
				</view>

				<view class="bf border-radius-p u-margin-left-30 u-margin-right-30">
					<view class="u-padding-left-20 u-padding-right-20 u-margin-top-30">
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">入住人：</text>
							<text class="p_text u-margin-left-15">{{vuex_userInfo.username}}</text>
						</view>
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">身份证号：</text>
							<text class="p_text u-margin-left-15">{{vuex_userInfo.card}}</text>
						</view>
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">手机号：</text>
							<text class="p_text u-margin-left-15">{{vuex_userInfo.phone}}</text>
						</view>
					</view>
				</view>
				
				<view class="bf border-radius-p u-margin-left-30 u-margin-right-30">
					<view class="u-padding-left-20 u-padding-right-20 u-margin-top-30">
						<view class="u-flex u-row-between u-padding-bottom-30 u-padding-top-30">
							<text class="p_title_1">微信支付：</text>
							<text class="p_text u-margin-left-15">{{order_info.wx_price}} 元</text>
						</view>
					</view>
				</view>

				<view class="pay_buttons u-flex">
					<u-button @click="pay" type="warning" style="width: 100%;">立即支付</u-button>
				</view>

			</view>
		</u-popup>


	</view>
</template>

<script>
	import LoginButton from '@/components/login-button/index.vue';
	export default {
		data() {
			return {
				// id: '108',
				id: '',
				roomData: {},
				// img_list: [],
				calendar_show: false,
				temp_time: {},
				order_info: {},
				order_popup_flag: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			// this.img_list = JSON.parse(decodeURIComponent(options.img_list));
			this.init();
		},
		methods: {
			checkOrder(e) {
				// 检查订单合法性 ；
				this.temp_time = e;
				// console.log(this.temp_time);
				this.$u.api.checkOrder({
					start_time: e.startDate,
					end_time: e.endDate,
					room_id: this.id,
				}).then(res => {
					if (res.code == 1) {
						this.order_info = res.data;
						this.order_popup_flag = true;
					};

					if (res.code == 0) {
						if (res.error_type == 1) {
							this.$refs.uToast.show({
								title: `${res.msg}`,
								type: 'warning',
								position: 'bottom',
								icon: false,
								callback: () => {
									this.$u.route({
										url: 'pages/userInfo/index',
										params: {},
									})
								}
							}) ;
							return false ;
						};
						if (res.error_type == 0) {
							this.$refs.uToast.show({
								title: `${res.msg}`,
								type: 'warning',
								position: 'bottom',
								icon: false,
								callback: () => {
									this.$u.route({
										url: 'pages/order/userOrder',
										params: {},
									})
								}
							}) ;
							return false ;
						};
						this.$refs.uToast.show({
							title: `${res.msg}`,
							type: 'warning',
							position: 'bottom',
							icon: false,
							callback: () => {
								this.calendar_show = true;
							}
						})
					}
				})
			},
			open_calendar() {
				if (this.vuex_hasLogin) {
					this.calendar_show = true;
				} else {
					this.$refs.LoginButton.button_click();
				}
			},
			timePiker_change(e) {
				this.temp_time = e;
			},
			pay() {
				this.$u.api.houseOrder({
					start_time: this.temp_time.startDate,
					end_time: this.temp_time.endDate,
					room_id: this.id,
				}).then(res => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: `${res.msg}`,
							type: 'warning',
							position: 'bottom',
							icon: false,
							callback: () => {
								this.calendar_show = true;
							}
						})
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: `${res.msg}`,
							type: 'warning',
							position: 'bottom',
							icon: false,
							callback: () => {
								this.calendar_show = false;
								this.$u.route({
									type:'back'
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.info.timeStamp.toString(),
							nonceStr: res.info.nonceStr,
							package: res.info.package,
							signType: res.info.signType,
							paySign: res.info.paySign,
							success: res => {
								this.$u.route({
									type: 'back'
								})
								uni.requestSubscribeMessage({
									tmplIds: ['XfuS-s8SghjpDmFWNryuyG9QhwXFdECSYI5z34nBwdg',
										'LcIUrWYTU3QvU6SFd7vZu70EJHh6GDzYDwgFdaQ0n8g'
									],
								})
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}

				})
			},
			init() {
				this.$u.api.room({
					id: this.id
				}).then(res => {
					let temp_arr = [] ;
					for(let i = 0 ; i < res.data.sub_time.length ; i ++) {
						let arr = res.data.sub_time[i].split('-') ;
						temp_arr.push({
							y : arr[0] * 1 ,
							m : arr[1] * 1 ,
							d : arr[2] * 1 ,
						})
					}
					res.data.sub_time = temp_arr ;
					this.roomData = res.data;
				})
			},
			// 回退
			page_back() {
				this.$u.route({
					type: 'back'
				});
			},
		},
		computed: {
			nav_top: function() {
				let nav_top = this.vuex_systemInfo.statusBarHeight;
				return nav_top;
			}
		},
		components: {
			LoginButton
		}
	}
</script>

<style lang="scss" scoped>
	.pay_buttons {
		bottom: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 160rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.p_text {
		font-size: 30rpx;
		color: #999;
	}

	.p_title_1 {
		font-weight: 700;
		font-size: 32rpx;
		color: #000000;
	}

	.order_popup_box {
		height: 100vh;
		background-color: #ECF5FF;
		position: relative;
	}

	.bf {
		background-color: #FFFFFF;
	}

	.border-radius-p {
		border-radius: 30rpx;
	}

	.vip_price {
		color: #FA3534;
		font-weight: 700;
		font-size: 32rpx;
	}

	.roomData-item {
		flex-basis: 33.333%;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.roomData-img {
		width: 75rpx;
		height: 75rpx;
	}

	.roomData-text {
		margin-top: 10rpx;
		color: #000000;
	}

	.roomData {}

	.pre_price {
		color: #909399;
		font-size: 28rpx;
	}

	.price {
		color: #FF9900;
		font-weight: 700;
		font-size: 32rpx;
	}

	.hinfo_name {
		font-weight: 700;
		color: #000000;
	}

	.details-top-box {
		background-color: red;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		width: 750rpx;
	}

	.bad-box {
		padding: 44rpx;
		background-color: #FFFFFF;
	}

	.back-button-icon {
		transition: all .3s;
		width: 60rpx;
		height: 60rpx;
		font-weight: bold;
	}

	.back-button {
		position: fixed;
		left: 30rpx;
		height: 88rpx;
		width: 88rpx;
	}
</style>
